<template>
    <div class="user-details">
        <h3>用户详情</h3>
        <p>此组件展示了用户的详细信息。</p>
        <p>Name: {{ props.name }}</p>
        <p>Age: {{ props.age }}</p>
        <button @click="notifyParent">单击</button>
    </div>
</template>

<!-- <script>
export default {
    props: {
        name: String,
        age: Number
    }
}; 
</script> -->

<script setup>
import { onMounted } from 'vue';

const props = defineProps({
    name: String,
    age: Number
});

const emit = defineEmits(['custom-event']);
function notifyParent() {
    emit('custom-event', { message: '按钮被单击了' });
}
onMounted(async () => {
  // const response = await fetch('https://api.example.com/data');
  // message.value =  response.json();
})
</script>